<!-- 项目管理 -->
<template>
  <div class="ProjectManagementPage">
    <div class="container">
      <div class="navBarTitle">
        <div class="rentSeeking" :class="{styleColor:currentIndex ==1}" @click="currentIndexBtn">寻租项目</div>
        <div class="TakeOn" :class="{styleColor:currentIndex1 ==1}" @click="currentIndexBtn1">承接项目</div>
      </div>
        <div v-show='currentIndex ==1' class="listItemBox">
          <!-- @click="goInfoData(item.needs_id)" 卡片的详情事件 --> 
          <div class="projectItem" v-for="(item,index) of needList" :key="index">
              <div class="listLeftNode">
                <img :src="array[item.work_demand]?array[item.work_demand]:defaultIcon" class="itemImg">
                <ul class="itemTitleName">
                  <li class="itemTitleNameFontSize" v-for="(items,i) of item.work_demand" :key="i">{{items}}</li>
                </ul>
              </div>
              <div class="listColumn">
                <div class="titleNode">{{item.name}}</div>
                <div class="listBg" v-if="item.adcode_city!==''">
                  <img src="./../../../../../public/img/eenginering/addressIcon.png" class="addressIcon">
                  <span class="addressName">{{item.adcode_city}}{{item.address}}</span>
                </div>
                <div class="infoBox">
                  <div class="timeBox">
                    <img src="./../../../../../public/img/eenginering/timeIcon.png" class="timeImg">
                    <span class="timeName">{{item.create_time}}</span>
                  </div>
                </div>
                <div class="goProjectInfo" @click.stop="goProjectBtn">
                  <div>项目管理</div>
                  <div>
                    <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
                  </div>
                </div>
              </div>
          </div>
          <div class="noMsgBg" v-if="needList.length <1"></div>
          <div class="noMsgName" v-if="needList.length <1">页面空空的</div>
        </div>
        <div v-show='currentIndex1 ==1' class="listItemBox">
          <div class="projectItem" v-for="(its,j) of needList1" :key="j">
              <div class="listLeftNode">
                <img :src="array[its.work_demand]" class="itemImg">
                <ul class="itemTitleName">
                  <li class="itemTitleNameFontSize" v-for="(itss,jx) of its.work_demand" :key="jx">{{itss}}</li>
                </ul>
              </div>
              <div class="listColumn">
                <div class="titleNode">{{its.name}}</div>
                <div class="listBg" v-if="its.adcode_city!==''">
                  <img src="./../../../../../public/img/eenginering/addressIcon.png" class="addressIcon">
                  <span class="addressName">{{its.adcode_city}}{{its.address}}</span>
                </div>
                <div class="infoBox">
                  <div class="timeBox">
                    <img src="./../../../../../public/img/eenginering/timeIcon.png" class="timeImg">
                    <span class="timeName">{{its.create_time}}</span>
                  </div>
                </div>
                <div class="goProjectInfo" @click.stop="goProjectBtn">
                  <div>项目管理</div>
                  <div>
                    <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
                  </div>
                </div>
              </div>
          </div>
          <div class="noMsgBg" v-if="needList1.length < 1"></div>
          <div class="noMsgName" v-if="needList1.length < 1">页面空空的</div>
        </div>
        <div class="ejectImgBg" v-show="isImg">
          <div class="wxImg" @click="btnIsImg"></div>
        </div>
    </div>
  </div>
</template>

<script >
import {getNeedlist,getNeedlist1} from './../../../../apis/api.js'
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
  data() {
 // 这里存放数据
    return {
      isImg:false,
      currentIndex:1,
      currentIndex1:-1,
      needList:[],
      needList1:[],
      array:{
        打桩:require('./../../../../../public/img/eenginering/dazhuang.png'),
        电力工程:require('./../../../../../public/img/eenginering/dazhuang.png'),
        吊装:require('./../../../../../public/img/eenginering/diaozhuang.png'),
        地铁建设:require('./../../../../../public/img/eenginering/ditiejianshe.png'),
        房屋建设:require('./../../../../../public/img/eenginering/fangwujianshe.png'),
        公路工程:require('./../../../../../public/img/eenginering/gonglujianshe.png'),
        机场建设:require('./../../../../../public/img/eenginering/jichangjianshe.png'),
        矿山:require('./../../../../../public/img/eenginering/kuangshan.png'),
        绿化:require('./../../../../../public/img/eenginering/lvhua.png'),
        平整:require('./../../../../../public/img/eenginering/pingzheng.png'),
        破碎:require('./../../../../../public/img/eenginering/posui.png'),
        市政建设:require('./../../../../../public/img/eenginering/shizhengjianshe.png'),
        水利工程:require('./../../../../../public/img/eenginering/shuiligongcheng.png'),
        水暖工程:require('./../../../../../public/img/eenginering/shuinuangongcheng.png'),
        隧道建设:require('./../../../../../public/img/eenginering/suidaojianshe.png'),
        土石方:require('./../../../../../public/img/eenginering/tushifang.png'),
      },
      // 默认图
      defaultIcon:require('./../../../../../public/img/eenginering/defaultIcon.png')
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  // 寻租项目
  currentIndexBtn(){
    this.currentIndex = 1
    this.currentIndex1 = -1
    this.getNeedlist()
  },
  // 承接项目
  currentIndexBtn1(){
    this.currentIndex1 = 1
    this.currentIndex = -1
    this.getNeedlist1()
  },
  // 点击项目管理按钮弹出弹出层
  goProjectBtn(){
    this.isImg = true
  },
  btnIsImg(){
    this.isImg = false
  },
  // 跳转详情
  goInfoData(id){
    this.$router.push({path:'/projectInfo',query:{id}})
  },
  // 工程方列表
  async getNeedlist(){
    let data = {
      search_name:'',
    }
    let res = await getNeedlist(data)
    if(res.data.result =='1'){
      this.needList = res.data.body.list
    }
  },
  // 设备方列表
  async getNeedlist1(){
    let data = {
      search_name:'',
    }
    let res = await getNeedlist1(data)
    if(res.data.result =='1'){
      this.needList1 = res.data.body.list
    }
  },
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getNeedlist()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.container{
  width: 920px;
  margin-left: 20px;
}
.navBarTitle{
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #FFFFFF;
}
.navBarTitle{
  display: flex;
}
.rentSeeking{
  margin-left: 20px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.TakeOn{
  margin-left: 20px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.styleColor{
  color: #FF7D59;
  font-size: 16px;
  cursor: pointer;
}
.listItemBox{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
}
.projectItem{
  width: 430px;
  height: 221px;
  border: 1px solid #E7E7E7; 
  background: #fff;
  display: flex;
  position: relative;
  margin-right: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}
.listLeftNode{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100px;
}
.itemImg{
  width: 43px;
  height: 43px;
  border-radius: 50px;
  margin-top: 32px;
}
.itemTitleName{
  font-size: 12px;
  color: 333;
  margin-top: 11px;
}
.itemTitleNameFontSize{
  float: left;
}
.listColumn{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.titleNode{
  font-size: 16px;
  color: 3333;
  font-weight: 500;
  max-width: 250px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.listBg{
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.addressName{
  color: #999;
  font-size: 12px;
}
.infoBox{
  display: flex;
  align-items: center;
  position: absolute;
  right: 23px;
  bottom: 80px;
}
.timeBox{
  display: flex;
  align-items: center;
}
.timeImg{
  width: 22px;
  height: 22px;
}
.timeName{
  margin-left: 3px;
  font-size: 12px;
  color: #999;
}
.goProjectInfo{
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #FFB492 0%, #FF7D59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  right: 23px;
}
.rightIcon{
  width: 37px;
  height: 11px;
  margin-left: 20px;
}
// 弹出层
.ejectImgBg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.wxImg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 330px;
  height: 402px;
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/wxImg.png')no-repeat;
  background-size: 100%,100%;
}
.noMsgBg{
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%,-50%);
  width: 371px;
  height: 200px;
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/emptyMsg.png')no-repeat;
  background-size: 100%,100%;
}
.noMsgName{
  position: absolute;
  top: 61%;
  left: 58%;
  transform: translate(-50%,-50%);
  font-size: 14px;
  color: #333;
}
</style>
